<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>laySearchBar Test</title>
    <link rel="stylesheet" href="static/layui/css/layui.css" />
  </head>
  <body>
    <!-- 容器 -->
    <div id="search-container"></div>
    <script src="static/jquery.min.js"></script>
    <script src="static/layui/layui.js"></script>
    <script>
      layui
        .config({
          base: './' //配置 layui 第三方扩展组件存放的基础目录
        })
        .use(['laySearchBar'], function () {
          var laySearchBar = layui.laySearchBar,
            // 配置
            config = [
              {
                type: 'select',
                name: 'searchType',
                width: 100,
                selectOpts: [
                  { value: 'cnName', content: '中文名' },
                  { value: 'enName', content: '英文名' }
                ],
                linkInput: {
                  name: 'searchValue',
                  width: 130,
                  placeholder: '全部'
                }
              },
              {
                type: 'select',
                name: 'sex',
                width: 100,
                selectOpts: [
                  { value: '', content: '性别' },
                  { value: 1, content: '男' },
                  { value: 0, content: '女' }
                ]
              },
              // 互斥的条件
              {
                type: 'select',
                name: 'petKey',
                width: 100,
                linkage: { name: 'petValue', width: 130 },
                selectOpts: [
                  {
                    value: 0,
                    content: '拥有宠物',
                    linkageOpts: [
                      { value: '', content: '所有宠物' },
                      { value: 1, content: '狗儿' },
                      { value: 2, content: '猫儿咪' },
                      { value: 3, content: '黑皇' }
                    ]
                  },
                  {
                    value: 1,
                    content: '拥有植物',
                    linkageOpts: [
                      { value: '', content: '所有植物' },
                      { value: 1, content: '花' },
                      { value: 2, content: '多肉' }
                    ]
                  }
                ]
              },
              {
                type: 'select',
                label: '段位',
                labelStyle: 'width:88px',
                name: 'level',
                width: 120,
                selectOpts: [
                  { value: '', content: '全部' },
                  { value: 0, content: '黑铁' },
                  { value: 1, content: '白银' },
                  { value: 2, content: '黄金' }
                ]
              },
              {
                type: 'input',
                name: 'equp',
                width: 120,
                label: '装备',
                labelStyle: 'width:88px',
                placeholder: '无',
                default: '狂徒铠甲'
              },
              {
                type: 'timeRange',
                //label: '时间',
                //labelStyle: 'width:60px;',
                cols: [{ name: 'startTime', default: '2020-10-24 00:00:00' }, { name: 'endTime' }]
              },
              {
                type: 'timeRange',
                label: '时间段',
                labelStyle: 'width:100px;',
                cols: [{ name: 'startTime1', placeholder: '开始时间' }, { name: 'endTime1' }]
              },
              {
                type: 'button',
                content: '查询',
                onclick: function (field, elem, form) {
                  // 这里执行操作,如刷新查询的表格
                  console.log(field)
                }
              }
            ]

          // 渲染
          laySearchBar($('#search-container'), config)
        })
    </script>
  </body>
</html>
